<template>
  <div>
    <div class="overview">
      <h2>集群概览</h2>
      <table>
        <tr>
          <td><strong>节点数量:</strong> {{ clusterOverview.node_count }}</td>
          <td><strong>命名空间数量:</strong> {{ clusterOverview.namespace_count }}</td>
          <td><strong>Pod 数量:</strong> {{ clusterOverview.pod_count }}</td>
        </tr>
        <tr>
          <td><strong>服务数量:</strong> {{ clusterOverview.service_count }}</td>
          <td><strong>持久卷数量:</strong> {{ clusterOverview.pv_count }}</td>
          <td><strong>事件数量:</strong> {{ clusterOverview.event_count }}</td>
        </tr>
      </table>
    </div>
    <div class="node-list">
      <el-card class="node-card" v-for="(node, index) in nodes" :key="index">
        <div class="header">
          <span class="name">{{ node.name }}</span>
          <span class="status" :class="getStatusClass(node.conditions)">
            {{ getNodeStatus(node.conditions) }}
          </span>
        </div>
        <div class="content">
          <p class="info">名称: {{ node.name }}</p>
          <p class="info">IP 地址: {{ node.ip }}</p>
          <p class="info">架构信息: {{ node.architecture }}</p>
          <p class="info">kubelet 版本: {{ node.kubelet_version }}</p>
          <p class="info">CPU 可用: {{ node.allocatable.cpu }} / {{ node.capacity.cpu }}</p>
          <p class="info">内存可用: {{ formatMemory(node.allocatable.memory) }}M / {{ formatMemory(node.capacity.memory) }}M
          </p>

        </div>
      </el-card>
    </div>
    <!-- 引入 NamespaceList.vue 组件 -->
    <div>
      <namespace></namespace>

    </div>

  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { getClusterInfoApi, getClusterOverviewApi } from '@/api/clusterManagement';
import Namespace from './namespace.vue';

export default {
  name: 'NodeList',
  components: {
    Namespace,

  },
  setup() {
    const nodes = ref([]);
    const clusterOverview = ref({});
    const pods = ref([]);



    const getNodeStatus = (conditions) => {
      // 根据节点的状态条件返回节点的状态
      // 这里可以根据实际情况自定义逻辑
      // 这里只是一个示例，你可能需要根据实际条件来判断节点的状态
      return conditions ? 'Active' : 'Not Ready';
    };

    const getStatusClass = (conditions) => {
      // 根据节点的状态条件返回相应的 CSS 类名
      return {
        'status-active': conditions,
        'status-not-active': !conditions,
      };
    };
    const formatMemory = (memoryString) => {
      // 将内存字符串转换为 MB 单位
      const memoryInKB = parseInt(memoryString);
      return (memoryInKB / 1024).toFixed(2);
    };
    const fetchNodes = () => {
      getClusterInfoApi()
        .then(response => {
          nodes.value = response.data;
        })
        .catch(error => {
          console.error('Error fetching cluster info:', error);
        });
    };
    const fetchClusterOverview = () => {
      // 模拟获取集群概览信息
      // 这里可以调用后端接口获取集群概览信息
      // 这里使用假数据进行示例
      getClusterOverviewApi()
        .then(response => {
          clusterOverview.value = response.data;
        })
        .catch(error => {
          console.error('Error fetching cluster overview:', error);
        });

    };
    const fetchPods = (namespace) => {
      // 根据所选命名空间向后端发送请求获取对应的 pods 信息
      // 这里假设你已经实现了获取 pods 信息的函数，并将其赋值给 pods 变量
      // 可以调用你的函数，例如：getPodsApi(namespace)
      // 注意：这里的调用方式可能会根据你的实际代码稍作调整
      pods.value = getPodsApi(namespace);
    };
    onMounted(() => {
      fetchNodes();
      fetchClusterOverview();

    });

    return {
      nodes,
      clusterOverview,
      getNodeStatus,
      getStatusClass,
      formatMemory,
      pods,
      fetchPods,
    };
  },
};
</script>

<style scoped>
.node-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.node-card {
  width: 300px;
  margin: 10px;
}

.overview {
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 5px;
  margin-bottom: 20px;
  text-align: center;
  /* 水平居中 */
}

.overview h2 {
  margin-bottom: 10px;
  color: #333;
}

.table-container {
  margin: 0 auto;
  /* 居中显示 */
}

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  padding: 10px;
  border: 1px solid #ccc;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.name {
  font-size: 18px;
  font-weight: bold;
}

.status {
  font-size: 14px;
}

.content {
  margin-top: 5px;
}

.info {
  margin-bottom: 5px;
}
</style>
